<template>
  <div class="login-container">
    <div class="login-form">
       <img src="@/assets/logo1.png" alt="Logo" class="logo">
     <h2 style="color: #A28E4C;">公共监督员端</h2>
      <el-form :model="reqdata">
        <el-form-item prop="username" class="item">
          <el-input v-model="reqdata.username" placeholder="请输入手机号" class="input-box">
            <template #prefix>
              <el-icon style="color:#b79b51;"><User /></el-icon>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item prop="password" class="item">
          <el-input v-model="reqdata.password" type="password" placeholder="请输入登录密码" class="input-box">
            <template #prefix>
              <el-icon style="color:#b79b51"><Lock /></el-icon>
            </template>
          </el-input>
        </el-form-item>
         <div class="register-forgot-container">
          <span @click="handleRegister">注册</span>
        </div>
        <el-form-item>
          <el-button type="primary" class="login-button" @click="handleLogin">登录</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script setup>
import { reactive } from 'vue';
import { User, Lock } from '@element-plus/icons-vue';
import axios from '@/utils/axiosUtils';
import { ElMessage } from 'element-plus';
import router from '@/router';

let reqdata = reactive({
	username : '',
	password : ''
})
let handleLogin = function(){
	console.log(reqdata.username)
	console.log(reqdata.password)
  let oldPassword = reqdata.password;
  sessionStorage.setItem("oldPassword",oldPassword)
	axios.post('http://localhost:7000/service-neps/supervisor_login',{phoneNumber:reqdata.username,password:reqdata.password}).then(res=>{
		if(res.data.status==true){
			ElMessage({
				message:"您已登录成功",
				type:"success"
			});
      console.log(sessionStorage.getItem("password"))
			sessionStorage.setItem("token",res.data.token)
			console.log(res.data.token)

			sessionStorage.setItem("isLogin","ok")
			router.push({path:"/selectGrid",query:{user:res.data.user}});
		}else{
			console.log(res.data)
			ElMessage({
				message:res.data.msg,
				type:"error"
			})
		}
	}).catch(error=>{
		handleErrors(error);
	})
}
let handleErrors = function(error) {
    if (error.response) {
        ElMessage({
            message: '服务器错误: ' + error.response.data.msg,
            type: 'error',
        });
    } else if (error.request) {
        ElMessage({
            message: '服务器无响应',
            type: 'error',
        });
    } else {
        ElMessage({
            message: '错误: ' + error.msg,
            type: 'error',
        });
    }
}
function parseJWT(token) {
  // 分割JWT的三个部分
  let parts = token.split('.');
  let base64Url = parts[1];
  let rawData = atob(base64Url.replace(/-/g, '+').replace(/_/g, '/')); // 替换URL安全的字符
  let decoder = new TextDecoder('utf-8');
  let payload = JSON.parse(decoder.decode(new Uint8Array(rawData.split('').map(c => c.charCodeAt(0)))));
  return payload;
}
let token = sessionStorage.getItem("token")
console.log(token)
// user = parseJWT(token)
// sessionStorage.setItem("user",parseJWT(token));
// console.log(parseJWT(token));
// console.log(sessionStorage.getItem("user"+"111"));

let handleRegister = function(){
	router.push({path : '/register'})
}
</script>

<style scoped>
.login-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: url('@/assets/kongjing2.jpg') no-repeat center center;
  background-size: cover;
}

.login-form {
  width: 67vw;
  max-width: 400px;
  padding: 30px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  text-align: center;
}

.item{
  height: 10vw;
}
h2 {
  font-size: 19px;
  margin-bottom: 50px;
  color: #333;
   line-height: 2; /* 增加行间距 */
}

.el-form-item {
  margin-bottom: 30px;
}

.input-box {
  width: 100%;
  height: 100%;
}

.login-button {
  width: 100%;
  height: 10vw;
  font-size: 17px;
  background: linear-gradient(to right, #b79b51, #103428);
  border-color: transparent;
  letter-spacing: 15px; /* 添加字母间距 */
}

.login-button:hover {
  background: linear-gradient(to right, #ba9632, #0a3426);
}

.register-forgot-container {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}

.register-forgot-container span {
  color: #0a3426;
  cursor: pointer;
}

.logo {
  width: 250px; 
}
</style>
